<template>
  <div class="brand-content clear">
    <!-- 筛选信息 -->
    <FilterModule />

    <div class="brand-list">
      <div class="list-nav">
        <span class="el-icon-s-operation">数据列表</span>
        <div class="list">
          <el-button class="list-btn" @click="addBrand">添加</el-button>
          <el-select
            v-model="value"
            placeholder="显示条数"
            style="margin-left: 5px"
            class="list-select"
            @change="handerRow"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="valued"
            clearable
            placeholder="排序方式"
            style="margin-left: 5px"
            class="list-select"
            @change="sortFunction"
          >
            <el-option value="升序"> </el-option>
            <el-option value="降序"> </el-option>
          </el-select>
        </div>
      </div>

      <!-- 列表主要内容 -->
      <BrandList />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/sass/var.scss";

.brand-content {
  .brand-nav {
    border: 1px solid rgb(228, 228, 228);
    background-color: rgba(243, 243, 243);
    line-height: 48px;
    padding: 0 5%;

    span {
      color: #999;
      size: 14px;
      font-weight: 500;
    }
    .nav-right {
      float: right;
      margin-top: 4px;
    }
  }
  .brand-list {
    background-color: rgba(243, 243, 243);
    border: 1px solid #e4e4e4;
    line-height: 50px;
    margin-top: 20px;

    .list-nav {
      padding: 0 20px;

      span {
        color: #666;
      }
      .list {
        float: right;
        .list-btn {
          margin-top: 5px;
        }
        .list-select {
          width: 120px;
        }
      }
    }

    .list-content {
      .brand-edit {
        color: $panel-color;
      }
      .brand-del {
        color: $panel-color;
      }
    }
  }
}
</style>

<script>
import FilterModule from "@/components/commodity-management/FilterModule.vue";
import BrandList from "@/components/commodity-management/BrandList.vue";
export default {
  name: "BrandView",
  data() {
    return {
      input: "",
      options: [
        {
          value: 3,
          label: "3条",
        },
        {
          value: 5,
          label: "5条",
        },
        {
          value: 10,
          label: "10条",
        },
      ],
      value: 10,
      valued: "",
      tableData: [],
      total: 0,
    };
  },
  methods: {
    addBrand() {
      this.$router.push({ path: "/goods/addBrand"});
    },
    handerRow(page) {
      this.$bus.$emit("selectPage", page);
      console.log(page);
    },
    sortFunction(valued) {
      this.$bus.$emit('sort',valued);
      
    },
  },
  components: {
    BrandList,
    FilterModule,
  },
};
</script>